<style>
.excel-cont{
    padding: 30px 30px 200px;
    background: #fff;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.excel-template {
    width:508px;
    height:160px;
    border-radius:2px;
    border:1px solid #E1E7EB;
    align-items: center;
    display: flex;
    flex-direction: column;
}

.excel-template h2 {
    font-size:20px;
    font-weight: normal;
    padding:19px 0 10px;
}

.excel-template p {
    color:#7485B1;
    padding-bottom:30px;
}

.excel-template a {
    width:100px;
    height:36px;
    background:rgba(53,119,251,1);
    border-radius:2px;
    font-size:16px;
    color:#fff;
    line-height: 36px;
    text-align: center;
}

.excel-upload {
    width:508px;
    height:430px;
    border:1px solid rgba(225,231,235,1);
    border-radius:2px;
    padding-top:60px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.upload-demo{
    width:360px;
    height: 140px;
    border-radius:2px;
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.upload-demo .el-upload-dragger {
    width:360px;
    border:none;
    height: 160px;
}


.upload-demo .el-upload-dragger .el-icon-upload {
    color:rgb(225,231,235)
}



.upload-demo .el-upload-dragger .el-upload__text {
    font-size:20px;
    padding-top:6px;
}

.upload-demo .el-upload-dragger .tip {
    font-size:14px;
    color:rgba(116,133,177,1);
    padding:10px 0 42px;
}

.mb27 {
    margin-bottom:27px;
}

.upload-demo .el-upload-dragger .el-icon-circle-check-outline {
    font-size:70px;
    color:#58D092;
}

.upload-demo .el-upload-dragger .el-upload__text {
    font-size:20px;
    padding-top:11px;
}

.upload-demo .el-upload-dragger .tip {
    font-size:14px;
    color:rgba(116,133,177,1);
    padding-top:10px;
}

.mb27 {
    margin-bottom:27px;
}
.excel-upload > .el-button{
    margin-top:22px;
}

.el-button--success:hover, .el-button--success:focus,.el-button--success {
    background: rgba(53,119,251,1);
    border:none;
}

.el-upload-list {
    margin-top:-55px;
}

.enterprise-tip {
    width:508px;
    height: 40px;
    background:rgba(229,247,255,1);
    border-radius:4px;
    border:1px solid rgba(142,212,255,1);
    display: flex;
    align-items: center;
    color:#666A80;
    font-size:14px;
    margin:60px 0 10px;
}

.enterprise-tip > i {
    margin:0 6px 0 11px;
    color:#008DFF;
}

</style>
<template>
    <section class="plan-list">
        <div class="excel-cont">
            <div class="enterprise-tip">
                <i class="icon iconfont"></i>请将企业微信通讯录全部导出为Excel
            </div>
            <div class="excel-upload">
                <el-upload
                    class="upload-demo"
                    ref="upload"
                    drag
                    :show-file-list="true"
                    :limit="1"
                    :with-credentials = "true"
                    :auto-upload="false"
                    :on-remove="removeFn"
                    :on-change="handlePreview"
                    :http-request="uploadFile"
                    multiple>
                    <i class="el-icon-upload" v-if="!uploadState"></i>
                    <div class="el-upload__text" v-if="!uploadState">将文件拖到此处，或<em>点击上传</em></div>
                    <p class="tip" v-if="!uploadState">上传企业通讯录模板</p>
                    <i class="el-icon-circle-check-outline" v-if="!!uploadState"></i>
                    <div class="el-upload__text mb27" v-if="!!uploadState">已选择</div>
                </el-upload>
                <!-- disabled -->
                <el-button type="success"  size="medium" style="width:100px" @click="submitUpload" v-if="!!uploadState">确定</el-button>
                <el-button type="info" disabled v-if="!uploadState">确定</el-button>
            </div>

        </div>
    </section>
</template>

<script>
export default {
    data() {
        return {
            path:[
                {
                    'name':'组织机构',
                    'path':'/organization/member-list'
                },
                {
                    'name':'员工管理',
                    'path':'/organization/member-list'
                },
                {
                    'name':'企业微信导入',
                    'path':''
                }
            ],
            uploadState:false
        }
    },
    methods:{

        submitUpload() {
            this.$refs.upload.submit();
        },

        handlePreview() {
            this.uploadState = true
        },

        removeFn() {
            this.uploadState = false
        },


        uploadFile(data) {
            let name = data.file.name
            if(name.split('.')[name.split('.').length-1] != 'xlsx') {
                this.$message.error('请上传正确的文件')
                return;
            }

            let param = new FormData(); //创建form对象
                param.append('file', data.file);//通过append向form对象添加数据

            axios.post('/com/employee/corporateWeChatImport', param, {timeout: 1000 * 60 * 10} ).then((res) => {

                var d = res.data

                if(d.flag == 1) {
                    this.$router.push('/organization/no-department')
                } else {
                    this.$message.error(d.msg)
                }
            })
        }

    },

    mounted() {
        this.$store.commit('setPath', this.path)
    }
}
</script>
